<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2024/12/17
  Time: 18:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Microsoft YaHei", sans-serif;
      background: #f5f5f5;
      padding: 20px;
    }

    .form-container {
      max-width: 600px;
      margin: 0 auto;
      background: #fff;
      padding: 30px;
      border-radius: 4px;
    }

    .form-group {
      margin-bottom: 20px;
      position: relative;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .form-group label .required {
      color: #ff4d4f;
      margin-right: 4px;
    }

    .phone-input-group {
      display: flex;
      gap: 8px;
    }

    .country-code {
      width: 100px;
      height: 38px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      padding: 4px 8px;
      background: #fff;
      cursor: pointer;
    }

    .form-control {
      width: 100%;
      height: 38px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      padding: 4px 11px;
      font-size: 14px;
    }

    .form-control:focus {
      border-color: #40a9ff;
      outline: none;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }

    .form-control.error {
      border-color: #ff4d4f;
    }

    .error-message {
      color: #ff4d4f;
      font-size: 12px;
      margin-top: 4px;
      display: none;
    }

    .password-strength {
      margin-top: 4px;
      font-size: 12px;
      color: #666;
    }

    .strength-indicator {
      display: inline-flex;
      gap: 4px;
      margin-left: 8px;
    }

    .strength-bar {
      width: 30px;
      height: 4px;
      background: #eee;
    }

    .strength-bar.weak { background: #ff4d4f; }
    .strength-bar.medium { background: #faad14; }
    .strength-bar.strong { background: #52c41a; }

    .checkbox-group {
      margin: 20px 0;
    }

    .checkbox-group label {
      display: inline;
      margin-left: 8px;
    }

    .checkbox-group a {
      color: #1890ff;
      text-decoration: none;
    }

    .submit-btn {
      width: 100%;
      height: 40px;
      background: #ff4d4f;
      color: #fff;
      border: none;
      border-radius: 2px;
      font-size: 16px;
      cursor: pointer;
    }

    .submit-btn:hover {
      background: #ff7875;
    }

    .hint-message {
      font-size: 12px;
      color: #666;
      margin-top: 4px;
    }

    #loger-top{
      display: flex;
    }

    #oneDiv{
      position: absolute;
      left: 220px;
      top: 55px;
    }

    #oneSpan{
      font-size: 20px;
    }

    #twoSpan{
      margin-left: 20px;
      background-color: pink;
      padding: 5px;
      border-radius: 10px;
    }

    #div-right{
      position: absolute;
      left: 1200px;
      top: 50px;
    }

    #threeSpan{
      color: #999999;
      font-size: 12px;
    }

    #fourSpan a{

      text-decoration: none;
      color: #999999;
      font-size: 12px;
    }
  </style>
</head>
<body>
<div id="loger-top">
  <div> <img src="static/img/PS2lfS0492.jpg"> </div>
  <div id="oneDiv"> <span id="oneSpan">欢迎注册</span> <span id="twoSpan">新人有礼，注册即享188元大礼包</span></div>
  <div id="div-right"> <span id="threeSpan">已有同城账号？</span> <span id="fourSpan"><a href="login.jsp">登录</a></span></div>
</div>



<div class="form-container">
  <form id="registerForm">
    <div class="form-group">
      <label><span class="required">*</span>手机号码</label>
      <div class="phone-input-group">
        <select class="country-code">
          <option value="86">+86</option>
        </select>
        <input type="tel" class="form-control" id="phone" name="phone">
        <span id="phoneIsRes"></span>
      </div>
      <div class="error-message" id="phoneError"></div>
      <div class="hint-message">请输入手机号码</div>
    </div>

    <div class="form-group">
      <label><span class="required">*</span>登录密码</label>
      <input type="password" class="form-control" id="password" name="password">
      <div class="error-message" id="passwordError"></div>
      <div class="hint-message">6-18位，字母、数字、特殊符号中的两种或以上，不能单独使用字母、数字或符号</div>
      <div class="password-strength">
        安全程度：
        <div class="strength-indicator">
          <div class="strength-bar" id="strengthBar1"></div>
          <div class="strength-bar" id="strengthBar2"></div>
          <div class="strength-bar" id="strengthBar3"></div>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label><span class="required">*</span>确认密码</label>
      <input type="password" class="form-control" id="confirmPassword" name="confirmPassword">
      <div class="error-message" id="confirmPasswordError"></div>
      <div class="hint-message">请输入确认密码</div>
    </div>

    <div class="checkbox-group">
      <input type="checkbox" id="terms" name="terms">
      <label for="terms">
        我已阅读并同意
        <a href="#">《同程旅行服务协议》</a>
        <a href="#">《同程旅行隐私政策》</a>
        <a href="#">《软件许可使用协议》</a>
      </label>
    </div>

    <button type="button" class="submit-btn">同意服务条款并注册</button>

  </form>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
  $(document).ready(function() {
    // 手机号验证
    $('#phone').on('blur', function() {
      const phone = $(this).val().trim();
      const phoneRegex = /^1[3-9]\d{9}$/;

      if (!phone) {
        showError('phone', '请输入手机号码');
      } else if (!phoneRegex.test(phone)) {
        showError('phone', '请输入正确的手机号码');
      } else {
        // 检查手机号是否已存在
        $.ajax({
          url: '/gyhQueryUserInfo',
          type: 'POST',
          data: { phone: phone },
          dataType: 'text',
          async: false,
          success: function(data) {
            if (data==='success'){
              alert('手机号已存在')
              //清空手机栏目的值
              $('#phoneIsRes').text('X').css('color','red')
              //禁止使用提交按钮
              $('#registerForm').find('button[type="button"]').attr('disabled',true)
            } else {
              /* alert('手机号不存在')*/
              //手机不存在，可以注册
              $('#phoneIsRes').text('✔').css('color','green')
              //打开提交按钮
              $('#registerForm').find('button[type="button"]').attr('disabled',false)
            }
          }
        });
      }
    });
    // 密码验证和强度检测
    $('#password').on('input blur', function() {
      const password = $(this).val();
      validatePassword(password);
    });
    // 确认密码验证
    $('#confirmPassword').on('blur', function() {
      const confirmPassword = $(this).val();
      const password = $('#password').val();

      if (!confirmPassword) {
        showError('confirmPassword', '请输入确认密码');
      } else if (confirmPassword !== password) {
        showError('confirmPassword', '两次输入的密码不一致');
      } else {
        hideError('confirmPassword');
      }
    });

    // 表单提交验证
    $('#registerForm').on('submit', function(e) {
      e.preventDefault();

      // 触发所有字段的验证
      $('#phone').trigger('blur');
      $('#password').trigger('blur');
      $('#confirmPassword').trigger('blur');

      // 检查是否有错误
      if ($('.error-message:visible').length > 0) {
        return false;
      }

      // 检查服务条款
      if (!$('#terms').is(':checked')) {
        alert('请阅读并同意服务条款');
        return false;
      }

      // 这里添加表单提交逻辑
      console.log('表单验证通过，准备提交...');
    });

    // 密码验证函数
    function validatePassword(password) {
      const hasLetter = /[a-zA-Z]/.test(password);
      const hasNumber = /\d/.test(password);
      const hasSymbol = /[!@#$%^&*(),.?":{}|<>]/.test(password);
      const validLength = password.length >= 6 && password.length <= 18;

      let strength = 0;
      let types = 0;

      if (hasLetter) types++;
      if (hasNumber) types++;
      if (hasSymbol) types++;

      if (validLength && types >= 2) {
        hideError('password');

        // 计算密码强度
        strength = types;

        // 更新强度指示器
        $('.strength-bar').removeClass('weak medium strong');
        for (let i = 0; i < strength; i++) {
          $("#strengthBar"+(i + 1)).addClass(
                  strength === 1 ? 'weak' :
                          strength === 2 ? 'medium' : 'strong'
          );
        }
      } else {
        showError('password', '密码必须包含字母、数字、特殊符号中的两种或以上，长度6-18位');
        $('.strength-bar').removeClass('weak medium strong');
      }
    }

    // 显示错误信息
    function showError(field, message) {
      $("#"+field).addClass('error');
      $("#"+field+"Error").text(message).show();
    }

    // 隐藏错误信息
    function hideError(field) {
      $("#"+field).removeClass('error');
      $("#"+field+"Error").hide();
    }
  });

  $(".submit-btn").click(function(){
    //获取手机号,密码.
    var phone=$("#phone").val();
    var password=$("#password").val();


    //发送请求到添加用户的servlet
    $.ajax({
      url:"/GyhaddUserInfo",
      type:"post",
      data:{phone:phone,password:password},
      dataType:"text",
      async:false,
      success:function(data){
        if(data==="success"){
          alert("注册成功")
          //重新渲染页面


          //跳转到登录页面
          window.location.href="login.jsp"

        }else{
          alert("注册失败")
        }
      }
    })
  })


</script>
</html>
